<template>
  <div class="center_bottomchart">
    <div class="center_bottomchart-header">
      <el-button size="small" type="primary" @click="showBig = true">预览</el-button>
      <el-date-picker key="天" :clearable="false" v-model="monthRange" type="monthrange" start-placeholder="开始月份"
        end-placeholder="结束月份" size="small" style="width: 180px" />
      <el-select collapse-tags multiple size="small" style="width: 180px" v-model="checked" placeholder="请选择">
        <el-option v-for="item in allProjectArr" :key="item.value" :label="item.label" :value="item.label">
        </el-option>
      </el-select>
      <!-- <div class="title1">{{ title }}</div> -->
      <!-- <Select :isTable="false" :dataSwitch="true" v-model="checkList">
        <template slot="left">
          <el-button size="small" type="primary" @click="showBig = true"
            >预览</el-button
          >
          <el-button size="small" style="margin-right: 8px;" type="primary" @click="exportData"
            >导出</el-button
          >
          <span class="datashow">数据显示:</span>
          <el-switch v-model="showLabel" active-color="#13ce66"> </el-switch>
        </template>
</Select> -->
    </div>
    <div class="bot">
      <Echart ref="childRef" :options="options" id="bottomLeftChart" class="echarts_bottom1" :isResize="true"></Echart>
    </div>
    <!-- 预览 -->
    <el-dialog title="预览" fullscreen :modal-append-to-body="false" :visible.sync="showBig" custom-class="chart-dialog">
      <div class="bot2">
        <Echart :options="handleDialog(options)" id="bottomLeftChart2" class="echarts_bottom1" :isResize="true">
        </Echart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { currentGET } from "api";
import { color, graphic } from "echarts";
// import Select from "./Select.vue";
import { settlement } from "@/api/table";
import moment from "moment";

const colors = {
  0: '#f7f733',
  1: '#e88815',
  2: '#1e89d4',
  3: '#10cdf6',
  4: '#91cc75',
  5: '#ee6666',
};

function toFixed(val, fix = 0) {
  return val ? Number(val).toFixed(fix) : val;
}
const label = {
  show: true,
  position: "top",
};
export default {
  props: {
    // allProjectArr: {
    //   type: String,
    //   default: "图表",
    // },
    allProjectArr: {
      type: Array,
      default: () => [],
    },
    // checked: {
    //   type: Array,
    //   default: () => ['幺站二期'],
    // },
  },
  components: {
    // Select,
  },
  data() {
    return {
      options: {},
      checkList: [
        "结算电价",
        // "售电量",
        // "实时电量",
        // "抄表电量",
        // "中长期电价",
        // "日前电价",
        // "实时电价",
        // "抄表电价",
      ],
      showLabel: false,
      showBig: false,
      monthRange: [
        moment().subtract(3, "month").format("YYYY-MM"),
        moment().format("YYYY-MM"),
      ],
      projecOptions: [
        // {
        //     label: '1',
        //     value: '1'
        // }
      ],
      data: [],
      checked: [],
    };
  },
  created() {
    // this.getDailySummary();
    // console.log(this.allProjectArr,'allProjectArr');
    // this.init(this.data);
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    allProjectArr(val) {
      const labels = [];
      val
        .filter((item) => item.label !== "合计")
        .forEach((item, index) => {
          if (index < 2) {
            labels.push(item.label);
          }
        });
      this.checked = labels;
      this.getDailySummary();
      //   this.init(this.data);
      console.log(this.checked, "val11111111111111------");
    },
    checked(val) {
      this.init(this.data);
      console.log(val, "checked------");
    },
    checkList(val) {
      this.init(this.data);
      //   console.log(val, "checkList------");
    },
    showLabel: {
      handler() {
        this.init(this.data);
      },
      deep: true,
    },
    monthRange: {
      handler() {
        this.getDailySummary();
      },
      deep: true,
    },
  },
  methods: {
    // 日期
    async getDailySummary() {
      // const ids = []
      // this.allProjectArr.forEach(item =>{
      //     if (this.checked.includes(item.label)) {
      //         ids.push(item.value)
      //     }
      // })
      const params = {
        projectIds:
          "0," + this.allProjectArr.map((item) => item.value).join(","),
        startDate: moment(this.monthRange[0])
          .startOf("month")
          .format("YYYY-MM-DD"),
        endDate: moment(this.monthRange[1]).endOf("month").format("YYYY-MM-DD"),
      };
      this.params = params;
      const res = await settlement(params);
      const ll = res || [];
      this.data = this.handleChildrenData(ll);
      this.init(this.data);
    },
    handleData(val) {
      val.forEach((item) => {
        // item.time =
        //   item.summaryDate ||
        //   ((item.hour || item.hour === 0) && item.hour.toString() + ":00");
        item.time = item.recordDate;
        // 中长期
        // 中长期
        item.settlementAvgPrice = toFixed(item.settlementAvgPrice, 3);
        // item.midLongTermPrice = toFixed(item.midLongTermPrice, 2);
        // item.midLongTermCost = toFixed(item.midLongTermCost, 2);

        // // 日前
        // item.dayAheadClearedPower = toFixed(item.dayAheadClearedPower, 3);
        // item.dayAheadDeviationPower = toFixed(item.dayAheadDeviationPower, 3);
        // item.dayAheadClearedPrice = toFixed(item.dayAheadClearedPrice, 2);
        // item.dayAheadCost = toFixed(item.dayAheadCost, 2);

        // // 实时
        // item.realTimeClearedPower = toFixed(item.realTimeClearedPower, 3);
        // item.realTimeDeviationPower = toFixed(item.realTimeDeviationPower, 3);
        // item.realTimeClearedPrice = toFixed(item.realTimeClearedPrice, 2);
        // item.realTimeCost = toFixed(item.realTimeCost, 2);

        // // 抄表
        // item.meterReadingPower = toFixed(item.meterReadingPower, 3);
        // item.meterReadingAvgPrice = toFixed(item.meterReadingAvgPrice, 2);
        // item.meterReadingCost = toFixed(item.meterReadingCost, 2);

        // // 结算
        // item.settlementAvgPrice = toFixed(item.settlementAvgPrice, 3);
        // item.settlementAvgPrice = toFixed(item.settlementAvgPrice, 2);
        // item.settlementCost = toFixed(item.settlementCost, 2);
      });
      return val;
    },
    handleChildrenData(ll) {
      console.log(ll, "ll--------------");

      const timeArr = [];
      ll.forEach((item) => {
        const arr = item.dataList || item.powerTradingDataList;
        item.list = this.handleData(arr);
        item.list.forEach((item1) => {
          if (item1.time && !timeArr.includes(item1.time)) {
            timeArr.push(item1.time);
          }
        });
      });

      // console.log(ll, timeArr, 'll, timeArr-------------');
      const resArr = [];
      timeArr.forEach((t) => {
        const resObj = {
          time: t,
        };

        ll.forEach((item3) => {
          const obj = item3.list.find((item2) => item2.time === t);
          if (obj) {
            Object.keys(obj).forEach((kk) => {
              const val = obj[kk];
              resObj[`${item3.projectName}-${kk}`] = val;
            });
          }
        });
        // console.log(resObj,'resObj---');

        resArr.push(resObj);
      });
      // console.log(resArr,'resArr--------');
      const sortedData = resArr.sort((a, b) => {
        if (moment(resArr[0].time).isValid()) {
          if (a === "合计") return 1; // 将 '合计' 排在后面
          if (b === "合计") return -1; // 将 '合计' 排在后面

          const dateA = moment(a, "YYYY-MM-DD");
          const dateB = moment(b, "YYYY-MM-DD");

          return dateA - dateB;
        } else {
          return 0;
        }
      });
      if (resArr.length && moment(resArr[0].time).isValid()) {
        return resArr.sort((a, b) => {
          if (a.time === "合计") return 1; // 将 '合计' 排在后面
          if (b.time === "合计") return -1; // 将 '合计' 排在后面
          const dateA = moment(a.time, "YYYY-MM-DD");
          const dateB = moment(b.time, "YYYY-MM-DD");
          // return dateB - dateA
          return dateA - dateB;
        });
      } else {
        return sortedData;
      }
    },
    exportData() {
      this.$refs.childRef.saveAsImage();
    },
    // getData() {
    //   this.pageflag = true;
    //   currentGET("big6", { companyName: this.companyName }).then((res) => {
    //     // console.log("安装计划", res);
    //     if (res.success) {
    //       const obj = {};
    //       Object.keys(res.data).forEach((kk) => {
    //         obj[kk] = res.data[kk].slice(0, 5);
    //       });
    //       this.dataSource = obj;
    //       this.init(obj);
    //     } else {
    //       this.pageflag = false;
    //       this.$Message({
    //         text: res.msg,
    //         type: "warning",
    //       });
    //     }
    //   });
    // },
    handleSeries(obj) {
      const arr = [];
      const ll = [];
      this.allProjectArr.forEach((item) => {
        if (this.checked.includes(item.label)) {
          ll.push(item.label);
        }
      });
      ll.forEach((kk, index) => {
        arr.push({
          name: kk + "-" + "结算电价",
          name1: "结算电价",
          type: "line",
          barWidth: 12,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color:
              colors[index] || '#f7f733',
          },
          data: obj[`${kk}-settlementAvgPrice`],
          label: { ...label, show: this.showLabel },
        });
      });

      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "售电量",
      //       name1: "售电量",
      //       type: "bar",
      //       barWidth: 12,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: new graphic.LinearGradient(0, 0, 0, 1, [
      //             { offset: 0, color: "#1cf8e5" },
      //             { offset: 1, color: "#2bbbc9" },
      //           ]),
      //       },
      //       data: obj[`${kk}-dayAheadClearedPower`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });

      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "实时电量",
      //       name1: "实时电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#fac858",
      //       },
      //       data: obj[`${kk}-realTimeClearedPower`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });

      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "抄表电量",
      //       name1: "抄表电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#ee6666",
      //       },
      //       data: obj[`${kk}-meterReadingPower`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });

      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "中长期电价",
      //       name1: "中长期电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#5470c6",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: obj[`${kk}-midLongTermPrice`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });
      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "日前电价",
      //       name1: "日前电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#91cc75",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: obj[`${kk}-dayAheadClearedPrice`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });
      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "实时电价",
      //       name1: "实时电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#fac858",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: obj[`${kk}-realTimeClearedPrice`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });
      //   this.checked.forEach((kk) => {
      //     arr.push({
      //       name: kk + "-" + "抄表电价",
      //       name1: "抄表电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#ee6666",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: obj[`${kk}-meterReadingAvgPrice`],
      //       label: { ...label, show: this.showLabel },
      //     });
      //   });

      // [
      //     {
      //       name: "结算电价",
      //       name1: "结算电价",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#017efa",
      //       },
      //       data: settlementAvgPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "售电量",
      //       name1: "售电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#51cbff",
      //       },
      //       data: dayAheadClearedPower,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "实时电量",
      //       name1: "实时电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#30d887",
      //       },
      //       data: realTimeClearedPower,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "中长期电价",
      //       name1: "中长期电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#017efa",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: midLongTermPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "日前电价",
      //       name1: "日前电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#51cbff",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: dayAheadClearedPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "实时电价",
      //       name1: "实时电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#30d887",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: realTimeClearedPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //   ].filter((item) => this.checkList.includes(item.name1))
      return arr.filter((item) => this.checkList.includes(item.name1));
    },
    init(newData) {
      const category = [];
      // settlementAvgPrice = [], // 结算电价
      // dayAheadClearedPower = [], // 售电量
      // realTimeClearedPower = [], // 实时电量
      // midLongTermPrice = [], // 中长期电价
      // dayAheadClearedPrice = [], // 日前电价
      // realTimeClearedPrice = []; // 实时电价

      const obj = {
        // settlementAvgPrice: [], // 结算电价
        // dayAheadClearedPower: [], // 售电量
        // realTimeClearedPower: [], // 实时电量
        // midLongTermPrice: [], // 中长期电价
        // dayAheadClearedPrice: [], // 日前电价
        // realTimeClearedPrice: [], // 实时电价
      };
      this.checked.forEach((kk) => {
        obj[`${kk}-settlementAvgPrice`] = [];
        // obj[`${kk}-dayAheadClearedPower`] = [];
        // obj[`${kk}-realTimeClearedPower`] = [];
        // obj[`${kk}-meterReadingPower`] = [];
        // obj[`${kk}-midLongTermPrice`] = [];
        // obj[`${kk}-dayAheadClearedPrice`] = [];
        // obj[`${kk}-realTimeClearedPrice`] = [];
        // obj[`${kk}-meterReadingAvgPrice`] = [];
      });

      newData.forEach((item) => {
        if (item.time !== "合计") {
          category.push(item.time);
          this.checked.forEach((kk) => {
            obj[`${kk}-settlementAvgPrice`].push(
              toFixed(item[`${kk}-settlementAvgPrice`], 2)
            );
            // obj[`${kk}-dayAheadClearedPower`].push(
            //   toFixed(item[`${kk}-dayAheadClearedPower`], 2)
            // );
            // obj[`${kk}-realTimeClearedPower`].push(
            //   toFixed(item[`${kk}-realTimeClearedPower`], 2)
            // );
            // obj[`${kk}-meterReadingPower`].push(
            //   toFixed(item[`${kk}-meterReadingPower`], 2)
            // );
            // obj[`${kk}-midLongTermPrice`].push(
            //   toFixed(item[`${kk}-midLongTermPrice`], 2)
            // );
            // obj[`${kk}-dayAheadClearedPrice`].push(
            //   toFixed(item[`${kk}-dayAheadClearedPrice`], 2)
            // );
            // obj[`${kk}-realTimeClearedPrice`].push(
            //   toFixed(item[`${kk}-realTimeClearedPrice`], 2)
            // );
            // obj[`${kk}-meterReadingAvgPrice`].push(
            //   toFixed(item[`${kk}-meterReadingAvgPrice`], 2)
            // );
          });
        }
        // settlementAvgPrice.push(toFixed(item.dayAheadClearedPower, 0))
        // dayAheadClearedPower.push(toFixed(item.dayAheadClearedPower, 0))
        // realTimeClearedPower.push(toFixed(item.realTimeClearedPower, 0))
        // midLongTermPrice.push(toFixed(item.midLongTermPrice, 0))
        // dayAheadClearedPrice.push(toFixed(item.dayAheadClearedPrice, 0))
        // realTimeClearedPrice.push(toFixed(item.realTimeClearedPrice, 0))
      });

      this.options = {
        // backgroundColor: "#04065f",
        backgroundColor: "transparent",
        // toolbox: {
        //   show: true,
        //   feature: {
        //     // dataView: { readOnly: false },
        //     saveAsImage: {
        //       // backgroundColor: '#FFFFFF',
        //       iconStyle: {
        //         color: '#FFFFFF'
        //       }
        //     }
        //   },
        //   left: 0,
        //   top: -100
        // },
        tooltip: {
          trigger: "axis",
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            return [point[0], "10%"];
          },
        },
        legend: {
          // data: this.checkList,
          //   data: ["已安装", "计划安装", "安装率"],
          //   top: "24",
          //   icon: "circle",
          type: "scroll",
          bottom: category.length > 1000 ? 24 : 8,
          itemWidth: 15,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 16,
          },
        },
        grid: {
          left: "12",
          right: "12",
          bottom: "48",
          top: "18",
          containLabel: true,
        },
        xAxis: {
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e2e9f5",
            },
          },
          axisLabel: {
            fontSize: "14",
            //   fontWeight: 400,
            color: "#FFFFFF ",
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: category.length > 1000,
            type: "slider",
            xAxisIndex: [0, 5],
            // zoomLock: true,
            // width: 7,
            height: 16,
            bottom: 8,
            // right: 12,
            // borderWidth: 0,
            // borderColor: "transparent",
            // backgroundColor: "rgba(4,42,102,0.7)",
            // fillerColor: "#043D92",
            // borderRadius: 10,
            // handleSize: 0,
            // showDetail: false,
            start: 0,
            end: category.length > 1000 ? 60 : 100,
            // brushSelect: false,
            filterMode: "filter",
            showDataShadow: false,
            // realtime: true,
            // textStyle: {
            //   color: "transparent",
            // },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // dashOffset: 5,
                // color: "#153877",
              },
            },
            axisLabel: {
              color: "#FFFFFF",
              // fontSize: '10',
              // fontWeight: 800,
              // formatter: "{value}",
            },
          },
          {
            show: true,
            splitLine: { show: false },
            axisLabel: {
              color: "#FFFFFF",
              // fontSize: '10',
              // fontWeight: 800,
              // formatter: "{value}",
            },
            // axisLine: {
            //   lineStyle: {
            //     type: 'dashed',
            //     // color: "#607FB5",
            //   },
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: "#B4B4B4",
            //   },
            // },
            // axisLabel: {
            //   formatter: "{value}% ",
            // },
          },
        ],
        series: this.handleSeries(obj),
      };
    },
    handleDialog(val) {
      return { ...val, backgroundColor: '#04065f' }
    },
  },
};
</script>
<style lang="scss" scoped>
// :deep(.el-dialog){
//     background-color: #04065f;
// }
:deep() {
  .el-select .el-select__tags>span {
    display: flex;
  }
}

.center_bottomchart {
  width: 100%;
  height: 100%;

  .center_bottomchart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;

    .title1 {
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
    }
  }

  .bot {
    width: 100%;
    // height: 100%;
    height: calc(100% - 50px);

    .echarts_bottom1 {
      width: 100%;
      height: 100%;
    }
  }

  .bot2 {
    width: 100%;
    // height: 100%;
    height: 800px;
  }
}
</style>
